<template class="align-center" height="100%">
  <div>
    <v-img
      v-if="src !== ''"
      :src="src"
      :lazy-src="src"
      class="full-picture"
      contain
      @click="onClose"
    ></v-img>
    <v-row
      v-if="src === ''"
      class="d-flex justify-center align-center"
      height="100%"
    >
      <v-col
        v-for="n in photos"
        :key="n"
        class="d-flex justify-center"
        cols="auto"
      >
        <v-img
          :src="`${getPath}/Hobby/Dysnai/${n}.jpg`"
          position="center center"
          height="371"
          width="371"
          alt="logo"
          contain
          @click="onClickPicture(`${getPath}/Hobby/Dysnai/${n}.jpg`)"
        >
          <!-- <template v-slot:placeholder>
            <v-row class="fill-height ma-0" align="center" justify="center">
              <v-progress-circular
                indeterminate
                color="grey lighten-5"
              ></v-progress-circular>
            </v-row>
          </template> -->
        </v-img>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  props: {
    // photos: {
    //   type: Array
    // },
    photos: [],
  },
  data: () => ({
    photosCount: 0,
    cols: "auto",
    path: "",
    extension: "jpg",
    counterClick: 0,
    src: "",
  }),
  computed: {
    ...mapGetters(["getPhotoCurrentPage", "getPath"]),
  },
  methods: {
    ...mapActions(["updateView"]),
    onSetView(view) {
      this.updateView(view);
      console.log(view);
      // if (this.path === 'Hockey') {
      //   this.$router.push('/vue-mysite')
      // }
    },
    onGetPhotoCurrentPage() {
      // console.log(this.getPhotoCurrentPage);
      this.photosCount = this.getPhotoCurrentPage.count;
      this.path = this.getPhotoCurrentPage.link;
      // console.log(this.path);
    },
    onClickPicture(src) {
      this.src = src;
    },
    onClose() {
      this.src = "";
    },
  },
  mounted() {
    this.onGetPhotoCurrentPage();
  },
};
</script>

<style lang="sass">
// .buttons
//   display: flex
//   justify-content: space-between
//   margin-bottom: 10px

// .slides
//   //  position: absolute

// .full-picture
//    position: fixed
//    width: 100vw
//    height: 100vh
//    left: 0
//    top: 0
//    z-index: 999
//    background-color: #fff
</style>
